<template>
  <view class="content-box">
    <view v-for="item in 20" :key="item" class="box">
      {{ item }}
    </view>
  </view>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
/**
 * 参考链接： https://blog.csdn.net/xinTianou123/article/details/127871277
 */
.content-box {
  width: 100%;
  height: 100%;
  background-color: darkcyan;
  overflow: auto;

  /* #ifdef MP-WEIXIN */
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  /* #endif */
}

.box {
  margin: 20rpx 0;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
	text-align: center;
  background-color: #fff;
}
</style>
